import React, { Component } from 'react';
import { NavBar,ErrorBlock } from 'antd-mobile'
import { Button,Toast } from 'antd-mobile'
import "./pass.css"
import service from '../../../api';


class pass extends Component {
    constructor(props){
        super(props)
        this.state={
                tel:'',
                password:''
        }
    }
    // componentDidMount(){
    //     console.log(this.props.location.state);
    // }

    async nextToLogin(){
        var res = await service.user.user_dofinishregister({
            tel:this.props.location.state.tel,
            password:this.state.password
        })
        console.log(res.data);
        if(res.data.code == 200){
            // this.props.history.push('/login')
            this.props.history.push({ pathname:'/login',state:{tel:this.state.tel} })
            Toast.show({content:'注册成功！'})
        }else{
            Toast.show({content:'密码设置失败！'})
        }
    }
    onChange(e){
        // this.setState({password: e.target.value },()=>{
        //     console.log(this.state.password);
        // })
        this.setState( {password: e.target.value } )
    }
    render() {
        return (
            <div className='pass'>
                <NavBar onBack={()=>{this.back()}}>设置密码</NavBar>
                <ErrorBlock
                    image='https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg'
                    style={{
                    '--image-height': '150px',
                    }}
                    >
                </ErrorBlock> 
                <input type="text" placeholder='请输入密码' value={this.state.password || ''} onChange={(e)=>{ this.onChange(e) }}/>
                <p className='text'>密码强度校验,最少6位,包括至少1个大写字母,1个小写字母,1个数</p>
                <button onClick={()=>{ this.nextToLogin() }}>下一步</button>
            </div>
        );
    }
    async back(){
        this.props.history.go(-1);
    }
}
export default pass;